
<template>
  <div class="card table-main">
    <div ref="sceneContainerRef" class="scene-container">
      <div ref="sceneBoxRef" class="scene-box">
      <Scene></Scene>
      </div>
    </div>
  </div>
</template>

<script setup>
import {nextTick, onMounted, ref} from "vue";
import Scene from './components/index.vue'


const sceneContainerRef = ref()
const sceneBoxRef = ref()


onMounted(() => {
  let sceneContainer = sceneContainerRef.value
  let sceneBox = sceneBoxRef.value
  window.addEventListener("mousedown", (e) => {
    sceneBox.style.cursor = "move";
    sceneBox.style.position = "absolute";
    let disX = e.pageX - sceneBox.offsetLeft;
    let disY = e.pageY - sceneBox.offsetTop;

    const move = (e) => {
      let x = e.pageX - disX;
      let y = e.pageY - disY;

      let maxX = sceneContainer.offsetWidth - sceneBox.offsetWidth;
      let maxY = sceneContainer.offsetHeight - sceneBox.offsetHeight;

      if (x < maxX) {
        x = maxX;
      } else if (x > 0) {
        x = 0
      }

      if (y < maxY) {
        y = maxY;
      } else if (y > 0) {
        y = 0
      }

      sceneBox.style.left = x + "px";
      sceneBox.style.top = y + "px";
    }


    window.addEventListener('mousemove', move)

    window.addEventListener('mouseup', () => {
      window.removeEventListener('mousemove', move)
      sceneBox.style.cursor = "initial";
    })

  })
})


</script>



<style scoped lang="scss">
@import "index.scss";
</style>
